<template>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="性别" prop="sex" />
    <el-table-column label="院校" prop="school" />
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { computed, ref } from 'vue'

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
//修改
const handleEdit = (index, row) => {
  console.log(index, row)
  
}
//删除
const handleDelete = (index, row) => {
  console.log(index, row)
}

const tableData = [
  {
    name: 'Tom',
    sex:'男',
    school:'武汉大学'
  },
//   {
//     name: 'Sam',
//     sex:'男',
//     school:'华中科技大学'
//   },
//   {
//     name: 'Tom',
//     sex:'男',
//     school:'武汉大学'
//   },
//   {
//     name: 'Tom',
//     sex:'男',
//     school:'武汉大学'
//   },
]
</script>

<style lang="less" scoped>

</style>
